<template>
  <el-form ref="genInfoForm" :model="info" :rules="rules" label-width="120px" >
    <el-row>
      <el-col :span="12">
        <el-form-item prop="applicationId">
          <span slot="label">生成应用</span>
          <el-select v-model="info.applicationId" size="small" @change="applicationSelectChange">
            <el-option
              v-for="(application, index) in applicationList"
              :key="index"
              :label="application.description"
              :value="application.id"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item prop="moduleId">
          <span slot="label">生成模块</span>
          <el-select v-model="info.moduleId" size="small">
            <el-option
              v-for="(module, index) in moduleList"
              :key="index"
              :label="module.moduleDescription"
              :value="module.id"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item prop="tplCategory">
          <span slot="label">生成模板</span>
          <el-select v-model="info.tplCategory" size="small">
            <el-option label="单表（增删改查）" value="crud" />
            <el-option label="树表（增删改查）" value="tree" />
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item prop="packageName">
          <span slot="label">
            生成包路径
            <el-tooltip content="生成在哪个java包下，例如 com.lzyyj.pandamimi.system" placement="top">
              <i class="el-icon-question"></i>
            </el-tooltip>
          </span>
          <el-input v-model="info.packageName" size="small" />
        </el-form-item>
      </el-col>

      <el-col :span="12">
        <el-form-item prop="businessName">
          <span slot="label">
            生成业务名
            <el-tooltip content="可理解为功能英文名，例如 user" placement="top">
              <i class="el-icon-question"></i>
            </el-tooltip>
          </span>
          <el-input v-model="info.businessName" size="small" />
        </el-form-item>
      </el-col>

      <el-col :span="12">
        <el-form-item prop="functionName">
          <span slot="label">
            生成功能名
            <el-tooltip content="用作类描述，例如 用户" placement="top">
              <i class="el-icon-question"></i>
            </el-tooltip>
          </span>
          <el-input v-model="info.functionName" size="small" />
        </el-form-item>
      </el-col>

      <el-col :span="12">
        <el-form-item>
          <span slot="label">
            上级菜单
            <el-tooltip content="分配到指定菜单下，例如 系统管理" placement="top">
              <i class="el-icon-question"></i>
            </el-tooltip>
          </span>
          <treeselect
            :append-to-body="true"
            v-model="info.parentMenuId"
            :options="menus"
            :normalizer="normalizer"
            :show-count="true"
            placeholder="请选择系统菜单" size="small" style="width: 220px;"
          />
        </el-form-item>
      </el-col>

      <el-col :span="12">
        <el-form-item prop="genType">
          <span slot="label">
            生成代码方式
            <el-tooltip content="默认为zip压缩包下载，也可以自定义生成路径" placement="top">
              <i class="el-icon-question"></i>
            </el-tooltip>
          </span>
          <el-radio v-model="info.genType" label="0">zip压缩包</el-radio>
          <el-radio v-model="info.genType" label="1">自定义路径</el-radio>
        </el-form-item>
      </el-col>

      <el-col :span="24" v-if="info.genType == '1'">
        <el-form-item prop="genPath">
          <span slot="label">
            自定义路径
            <el-tooltip content="填写磁盘绝对路径，若不填写，则生成到当前Web项目下" placement="top">
              <i class="el-icon-question"></i>
            </el-tooltip>
          </span>
          <el-input v-model="info.genPath" size="small">
            <el-dropdown slot="append">
              <el-button type="primary">
                最近路径快速选择
                <i class="el-icon-arrow-down el-icon--right"></i>
              </el-button>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item @click.native="info.genPath = '/'">恢复默认的生成基础路径</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </el-input>
        </el-form-item>
      </el-col>
    </el-row>

    <el-row v-show="info.tplCategory == 'tree'">
      <h4 class="form-header">树结构信息</h4>
      <el-col :span="12">
        <el-form-item>
          <span slot="label">
            树编码字段
            <el-tooltip content="树显示的编码字段名， 如：dept_id" placement="top">
              <i class="el-icon-question"></i>
            </el-tooltip>
          </span>
          <el-select v-model="info.treeCode" placeholder="请选择">
            <el-option
              v-for="(column, index) in info.columns"
              :key="index"
              :label="column.columnName + '：' + column.columnComment"
              :value="column.columnName"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item>
          <span slot="label">
            树父编码字段
            <el-tooltip content="树显示的父编码字段名， 如：parent_Id" placement="top">
              <i class="el-icon-question"></i>
            </el-tooltip>
          </span>
          <el-select v-model="info.treeParentCode" placeholder="请选择">
            <el-option
              v-for="(column, index) in info.columns"
              :key="index"
              :label="column.columnName + '：' + column.columnComment"
              :value="column.columnName"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item>
          <span slot="label">
            树名称字段
            <el-tooltip content="树节点的显示名称字段名， 如：dept_name" placement="top">
              <i class="el-icon-question"></i>
            </el-tooltip>
          </span>
          <el-select v-model="info.treeName" placeholder="请选择">
            <el-option
              v-for="(column, index) in info.columns"
              :key="index"
              :label="column.columnName + '：' + column.columnComment"
              :value="column.columnName"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <h4 class="form-header">外键关联信息</h4>
    <el-col>
        <el-table ref="dragTable" :data="info.fkInfoList" row-key="id">
          <el-table-column label="序号" type="index" min-width="16" width="33" class-name="allowDrag" />
          <el-table-column label="名称" width="150">
            <template slot-scope="scope">
              <el-input v-model="scope.row.name"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="外键字段" width="150">
            <template slot-scope="scope">
              <el-select v-model="scope.row.fields" multiple>
                <el-option
                  v-for="(column, index) in info.columns"
                  :key="index"
                  :label="column.columnName  + (column.columnComment==null?'':'：'+column.columnComment)"
                  :value="column.columnName"
                ></el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column label="唯一" width="80">
            <template slot-scope="scope">
              <el-select v-model="scope.row.srcUnique">
                <el-option label="否" value=false />
                <el-option label="是" value=true />
              </el-select>
            </template>
          </el-table-column>
          <el-table-column label="关联的数据库" width="170">
            <template slot-scope="scope">
              <el-select v-model="scope.row.referencedSchema" @change="schemaSelectChange(scope.row, scope.$index)">
                <el-option
                  v-for="(schema, index) in schemas"
                  :key="index"
                  :label="schema.name"
                  :value="schema.name"
                ></el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column label="关联的外键表" width="170">
            <template slot-scope="scope">
              <el-select v-model="scope.row.referencedTable" @change="fkTableSelectChange(scope.row, scope.$index)">
                <el-option
                  v-for="(table, index) in scope.row.tables"
                  :key="index"
                  :label="table.tableName + '：' + table.tableComment"
                  :value="table.tableName"
                ></el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column label="外键表字段" width="150">
            <template slot-scope="scope">
              <el-select v-model="scope.row.referencedFields" multiple>
                <el-option
                  v-for="(column, index) in scope.row.fkTableColumns"
                  :key="index"
                  :label="column.columnName + (column.columnComment==null?'':'：'+column.columnComment)"
                  :value="column.columnName"
                  multiple
                ></el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column label="引用的是否唯一" width="80">
            <template slot-scope="scope">
              <el-select v-model="scope.row.referencedUnique">
                <el-option label="否" value=false />
                <el-option label="是" value=true />
              </el-select>
            </template>
          </el-table-column>
          <el-table-column label="级联删除" width="150">
            <template slot-scope="scope">
              <el-select v-model="scope.row.onDelete">
                <el-option label="级联删除" value="CASCADE" />
                <el-option label="无动作"   value="NO_ACTION" />
                <el-option label="限制删除" value="RESTRICT" />
                <el-option label="解除关联" value="SET_NULL" />
              </el-select>
            </template>
          </el-table-column>
          <el-table-column label="级联更新" width="150">
            <template slot-scope="scope">
              <el-select v-model="scope.row.onUpdate">
                <el-option label="级联更新" value="CASCADE" />
                <el-option label="无动作"   value="NO_ACTION" />
                <el-option label="限制更新" value="RESTRICT" />
                <el-option label="解除关联" value="SET_NULL" />
              </el-select>
            </template>
          </el-table-column>
          <el-table-column label="属性名" width="150">
            <template slot-scope="scope">
              <el-input v-model="scope.row.propertyName"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                icon="el-icon-delete"
                @click="handleDelete(scope.row, scope.$index)"
                v-hasPermi="['system:dept:remove']"
              >删除</el-button>
            </template>
          </el-table-column>
        </el-table>
    </el-col>
      <el-button type="primary" @click="onClickAdd">添加</el-button>
    </el-row>
  </el-form>
</template>

<script>
  import Treeselect from "@riophae/vue-treeselect";
  import "@riophae/vue-treeselect/dist/vue-treeselect.css";

  export default {
    components: { Treeselect },
    props: {
      info: {
        type: Object,
        default: null
      },
      applicationList: {
        type: Array,
        default: null
      },
      moduleList: {
        type: Array,
        default: null
      },
      schemas: {
        type: Array,
        default: null
      },
      tables: {
        type: Array,
        default: null
      },
      menus: {
        type: Array,
        default: []
      },
    },
    data() {
      return {
        rules: {
          tplCategory: [
            { required: true, message: "请选择生成模板", trigger: "blur" }
          ],
          packageName: [
            { required: true, message: "请输入生成包路径", trigger: "blur" }
          ],
          businessName: [
            { required: true, message: "请输入生成业务名", trigger: "blur" }
          ],
          functionName: [
            { required: false, message: "请输入生成功能名", trigger: "blur" }
          ],
        }
      };
    },
    watch: {
      // 'info.subTableName': function(val) {
      //   this.setFkTableColumns(val);
      // },
      // 'info.subTableName': function(val) {
      //   this.setFkTableColumns(val);
      // }
    },
    mounted(){
      console.log('this.applicationList)')
      console.log(this.applicationList)
      console.log('this.moduleList')
      console.log(this.moduleList)
    },
    methods: {
      // 点击新增
      onClickAdd() {
        this.info.fkInfoList.push(
          {
            tableId: this.info.tableId,
            tables: [],
            fkTableColumns:[]
        })
      },
      /** 删除按钮操作 */
      handleDelete(row, index) {
        console.log(this.info.fkInfoList);
        this.$modal.confirm('是否确认删除名称为"' + row.fields + '"的数据项？(index='+index+', this.info.fkInfoList='+this.info.fkInfoList.length+')').then(()=> {
          this.info.fkInfoList.splice(index,1)
        });
      },
      /** 转换菜单数据结构 */
      normalizer(node) {
        if (node.children && !node.children.length) {
          delete node.children;
        }
        return {
          id: node.menuId,
          label: node.menuName,
          children: node.children
        };
      },
      /** 应用选择改变 */
      applicationSelectChange(value) {
                console.log('this.moduleList')
      console.log(this.moduleList)
        this.info.moduleId = '';
        // this.moduleList = [];

        for(var i=0;i<this.applicationList.length;i++){
          if(this.applicationList[i].id==value){
            this.moduleList = this.applicationList[i].moduleList;
            if(this.moduleList.length>0){
              this.info.moduleId = this.moduleList[0].id;
            }
            break;
          }
        }
      },
      /** 关联数据库改变 */
      schemaSelectChange(row, index) {
        console.log("调试：关联数据库改变，value="+row.referencedSchema+", index="+index+", schemas.length="+this.schemas.length);
        var value = row.referencedSchema;
        row.tables=[];
        this.schemas.forEach(function (item, index) {
            if(item.name==value){
                row.tables=item.list;
                // _this.formValidate.list=_this.list[0];
            }
        })
        row.referencedTable = null;
        row.fkTableColumns = [];
        row.referencedFields = null;
      },
      /** 外键表选择变更触发 */
      fkTableSelectChange(row, index) {
        var value = row.referencedTable;
        row.referencedFields = null;
        row.fkTableColumns=[];
        row.tables.forEach(table =>{
          if(table.tableName == value){
            row.fkTableColumns = table.columns;
          }
        });
      },
    }
  };
</script>
